{% extends 'al120/base.html' %}
{% block header %}
    <link rel="stylesheet" href="/static/Croppr/croppr.css"/>
    <link rel="stylesheet" href="/static/iziModal/iziModal.min.css"/>
{% endblock %}
{% block content %}
    <div class="row">
        <div class="col-auto">
            <form id="ff">
                {% csrf_token %}
                <input type="file" class="form-control-file" id="fileInput" accept="image/*"/>
                <input type="submit" id="btnCrop" value="提交"/>
            </form>
        </div>
    </div>
    <div class="row">
        <div class="col-auto" style="margin-top: 10px; margin-bottom: 10px">
            <span class="badge bage-pill badge-danger">（1）选择文件 （2）标记平均值位置</span>
            <div class="d-flex justify-content-center" style="margin-top: 36px">
                <div class="spinner-border text-primary" role="status" id="id_loading" hidden>
                    <span class="sr-only">处理中 ...</span>
                </div>
            </div>
        </div>
    </div>
    <div class="row" style="margin-top: 16px">
        <div class="col-auto">
            <img id="ocr_result" src="" hidden class="img-fluid">
        </div>
    </div>
    <div class="row" style="margin-top: 16px">
        <div class="col-12">
            <img id="croppr" src="/static/al.png" alt="altvar">
        </div>
    </div>
    <div id="modal-ocr"><!-- 识别确认 --></div>

{% endblock %}
{% block script %}
    <script src="/static/Croppr/croppr.js"></script>
    <script src="/static/iziModal/iziModal.min.js"></script>
    <script>
        let loading = $('#id_loading');

        let croppr = new Croppr('#croppr', {
            startSize: [100, 5, '%']
        });

        $('#fileInput').on('change', function (e) {
            let file = e.target.files[0];
            //console.log(file);
            let reader = new FileReader();
            reader.readAsDataURL(file);
            reader.onload = function (e) {
                let src = e.target.result;
                //console.log(e);
                croppr.setImage(src);
            };
        });

        // 提交
        $('#ff').submit(function (evt) {
            evt.preventDefault();
            let value = croppr.getValue();
            console.log(value);
            let obj_file = $('input[type=file]')[0].files[0];
            // 空文件检查
            if (obj_file === undefined) {
                alert('请先选择文件');
                return;
            }
            let fd = new FormData();
            fd.append('file', obj_file);
            fd.append('x', value.x.toString());
            fd.append('y', value.y.toString());
            fd.append('w', value.width.toString());
            fd.append('h', value.height.toString());

            loading.attr('hidden', false);

            $.ajax({
                url: '{% url "al120:ocr" %}',
                type: 'POST',
                dataType: 'JSON',
                contentType: false,
                processData: false,
                data: fd,
                success: function (data) {
                    // console.log(data);
                    loading.attr('hidden', true);
                    if (data.status) {
                        // 显示 ocr识别图
                        let ocr_result = $('#ocr_result');
                        ocr_result.attr('src', 'data:image/png;base64,' + data.img);
                        ocr_result.removeAttr("hidden");
                        console.log(data.text);

                        $("#modal-ocr").iziModal({
                            title: 'OCR识别核对',
                            headerColor: '#88A0B9',
                            iframe: true,
                            width: 600,
                            closeOnEscape: true,
                            iframeHeight: 700,
                            radius: 3,
                            closeButton: true,
                            transitionIn: 'comingIn',
                            iframeURL: '{% url "al120:ocr_c" %}'
                                + '?txt=' + data.text,
                            onClosed: function () {
                                // console.log('closed');
                                $('#modal-ocr').iziModal('destroy');
                            }
                        });
                        $('#modal-ocr').iziModal('open');
                    } else {
                        alert('识别失败，请重新拍照，或者去手动填报');
                    }
                },
                error: function (xhr, msg, obj) {
                    console.log(msg);
                    loading.attr('hidden', true);
                }

            });
        });

    </script>
{% endblock %}